<template>
  <view class="login">
    <public-loading></public-loading>
    <up-toast ref="uToastRef"></up-toast>
    <z-nav-bar id="nav" bgColor="#ffffff" title="登录"></z-nav-bar>
     <view class="login-header df flex-col flex-a-center">
       <image src="https://wx.qlogo.cn/mmhead/j8cooK2zCqofjNWscw4tGMG5bzvc7F4xYIaZu3BPGzr1OicMjtjRYbbIiaWbuUrngiaaMP5tbrht5s/0"></image>
       <text>河马智洗</text>
     </view>
    <view class="login_btn">
          <button class="submit_btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">安全登录
          </button>
      <view class="pro_text mgt-20 ">
            <view class="round mgr-15"  @click="agreement=true" v-if="!agreement"></view>
             <image v-else class="round_active mgr-15" @click="agreement=false"  src="@/static/img/active_login.png"></image>
             <text >我已阅读并同意<text class="text_color">《用户协议》</text></text>
      </view>

    </view>
  </view>
</template>

<script setup lang="ts">
import {wxCallback,login,getInfo,wxPhone} from '@/api/login'
import { useStore } from '@/stores/user'
import {ref,watch} from "vue"
const agreement= ref<Boolean>(false)
const phone =ref<number>(null)
const uToastRef = ref(null)
const userInfo = useStore()
const  getPhoneNumber = async (e)=>{
  console.log(e)
  const {code,encryptedData,errMsg,iv} = e.detail
  if(code){
    if(!agreement.value){
      uToastRef.value.show({
        message: "请勾选用户协议"
      })
      return
    }
   const res = await wxPhone({
      code,
    })
    console.log(res)
    phone.value = res
  }
}
watch(phone,()=>{
  wxLogin()
})
const wxLogin =()=>{
  wx.login({
    success:(result)=>{
      wxCallback({
        wxNickname:"微信用户",
        code:result.code,
        phone:phone.value
      }).then(r=>{
          userInfo.setUserInfo({
          token:r
        })
          getInfo().then(res=>{
            userInfo.setUserInfo({
              ...res.user
            })
            uToastRef.value.show({
              message: "登录成功"
            })
            setTimeout(()=>{
              uni.navigateBack()
            },1500)
        })
      })
    }
  })
}
wx.login({
  success:(res=>{
    console.log('res',res)
  })
})
// login({
//   username:"15673723273",
//   password:"hema123456",
//   phone:"15673723273"
// })
</script>

<style lang="scss" >
@import '@/style/mixin.scss';
.login{
  width: 100%;
  background-color: #ffffff;
  min-height: 100vh;
  .login-header{
    width: 100%;
    margin-top: 200rpx;
    >image{
      width: 200rpx;
      height: 200rpx;
    }
    >text{
      margin-top: 20rpx;
      @include fontNSC(30rpx,500,#333333)
    }
  }
  .login_btn{
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 246rpx;
    padding: 0 32rpx;
    .submit_btn{
      border-radius: 60rpx;
      background-color:#0080FF ;
      @include fontNSC(38rpx,500,#ffffff);

    }
    .pro_text{
      display: flex;
     align-items: center;
      height: 50rpx;
      justify-content: center;

      .round{
        width: 32rpx;
        height: 32rpx;
        border: 1rpx solid #333333;
        border-radius: 50%;
      }
      .round_active{
        width: 32rpx;
        height: 32rpx;
      }
      >text{
       @include fontNSC(30rpx,500,#333333)
      }
    }
  }

}
button::after {
  border: 0; // 或者 border: none;
}
</style>
